<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器的基本使用</title>
    <script src="../lib/vue-2.6.12.js"></script>
    <link href="../image/favicon.ico" rel="shortcut icon">
</head>
<body>
    <div id="app">
        <p>message 的值为: {{ message | capi}}</p>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vue.js'
            },
            methods: {

            },
            // 过滤器函数,必须定义到 filters 节点之下
            // 过滤器本质上是函数
            filters:{
                // 注意: 过滤器函数形参中的 val,永远都是“管道符”前面的那个值
                capi(val) {
                    console.log(val)
                    // charAt() 方法,根据索引提取出字符串中索引对应的字符
                    console.log(val.charAt(0))
                    // 使用 .toUpperCase() 方法,将字符串第一个字符改成大写
                    const first = val.charAt(0).toUpperCase()
                    console.log(first)
                    // 字符串的 slice() 方法,可以截取字符串,从指定索引往后截取
                    const other = val.slice(1)
                    console.log(other)

                    // 强调: 过滤器中,一定要有一个返回值
                    return first + other
                }
            }

        })
    </script>
</body>
</html>